<template>
	<view>
		<u-navbar title="新增商品" :border-bottom='false' back-icon-size='48'></u-navbar>
		<u-gap height="20" bg-color="#F2F2F7"></u-gap>
		<view class="imgsInfo">
			<view class="lable">
				上传图片
			</view>
			<view class="coverBox">
				<view class="tip">
					商品封面 <text>(推荐尺寸 340x258）</text>
				</view>
				<!-- <view class="addPic" v-if="shopIcon">
					<image style="width: 100%;height: 100%;" :src="'https://api.loveworldzh.com/'+shopIcon" mode="">
					</image>
				</view> -->
				<view class="imagesBox">
<!--					<image src="../../../static/imgs/xiangji.png" mode=""></image>-->
          <u-upload ref="uUpload" :action="action" :file-list="icon" max-count="1" del-bg-color="rgba(173, 173, 173,.4)"
                    :auto-upload="true" width="168"
                    height="168"
                    :custom-btn="true"
                    :show-progress="false"
                    :header="headers"
                    @on-success="successIcon"
                    @on-remove="removeIcon"
                    @on-change="changeIcon"
                    @on-preview="previewIcon"
          >
            <view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
              <u-icon name="../../../static/imgs/xiangji.png" class="u-add-btn" size="68"></u-icon>
            </view>
          </u-upload>
				</view>
				<view class="envBox">
					<view class="tip">
						其他图片 <text>(推荐尺寸 336x226）</text>
					</view>
					<view class="imagesBox">
            <u-upload ref="uUpload" :action="action" :file-list="images" del-bg-color="rgba(173, 173, 173,.4)"
                      :auto-upload="true" width="168"
                      height="168"
                      :custom-btn="true"
                      :show-progress="false"
                      :header="headers"
                      @on-success="successImages"
                      @on-remove="removeImages"
                      @on-change="changeImages"
                      @on-preview="previewImages"
            >
              <view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
                <u-icon name="../../../static/imgs/xiangji.png" class="u-add-btn" size="68"></u-icon>
              </view>
            </u-upload>
					</view>
				</view>
			</view>
		</view>
		<u-gap height="20" bg-color="#F2F2F7"></u-gap>
		<view class="goodsInfo">
			<view class="lable">
				商品信息
			</view>
			<view class="shopInfo-li">
				<view class="text">商品名称</view>
				<input type="text" v-model="datas.title" placeholder="请输入商品名称" />
			</view>
			<view class="shopInfo-li">
				<view class="text">商品描述</view>
				<input type="text" v-model="datas.desc" placeholder="请输入商品描述" />
			</view>
			<view class="shopInfo-li">
				<view class="text">自定义分类</view>
				<input type="text" v-model="datas.category" placeholder="请输入自定义分类" />
			</view>
			<view class="shopInfo-li">
				<view class="text">商品规格</view>
				<input type="text" v-model="datas.unit" placeholder="请输入商品规格" />
			</view>
			<view class="shopInfo-li">
				<view class="text">商品价格</view>
				<input type="number" v-model="datas.price" placeholder="请输入商品价格" />
			</view>
		</view>
		<u-gap height="20" bg-color="#F2F2F7"></u-gap>
		<view class="submit" @click="addGood">
			确定
		</view>
		<u-gap height="20" bg-color="#F2F2F7"></u-gap>
	</view>
</template>

<script>
import oRequest from '@/api/goods.js'
export default {
  data(){
    return {
      headers:{},
      action:'',
      datas:{
        title:'',
        price:'',
        category:'',
        unit:'',
        desc:'',
        icon:'',
        images:'',
      },
      icon:[],
      images:[]
    }
  },
  onload(){

    //this.headers = {}
  },
  onShow(){
    this.action = this.$baseURL + 'upload/up'
  },
  methods:{
    successIcon:function(data, index, lists, name){
      this.datas.icon = data.full_path
    },
    removeIcon:function(index, lists, name){
      this.datas.icon = ''
    },
    changeIcon:function(res, index, lists, name){
      //console.log(res)
    },
    previewIcon:function(url, lists, name){

    },
    successImages:function(data, index, lists, name){
      //console.log(data)
      this.datas.images += data.full_path +','
    },
    removeImages:function(index, lists, name){
      let images = this.datas.images.substring(0,this.datas.images.length-1)
      images = images.split(',')
      delete images[index]
      let changeImage = ''
      images.forEach(item=>{
        changeImage += item+','
      })
      this.datas.images = changeImage
    },
    changeImages:function(res, index, lists, name){

    },
    previewImages:function(url, lists, name){

    },
    showMsg:function(msg){
      uni.showToast({
                      title:msg,
                      icon:'none'
                    })
    },
    async addGood(){
      let datas = this.datas
      if(datas.title === ''){
        this.showMsg('请输入商品名称')
        return false
      }
      if(datas.price === ''){
        this.showMsg('请输入商品价格')
        return false
      }
      if(datas.category === ''){
        this.showMsg('请输入商品分类')
        return false
      }
      if(datas.unit === ''){
        this.showMsg('请输入商品规格')
        return false
      }
      if(datas.desc === ''){
        this.showMsg('请输入商品描述')
        return false
      }
      if(datas.icon === ''){
        this.showMsg('请上传商口封面')
        return false
      }
      if(datas.images === ''){
        this.showMsg('请上传商口图片')
        return false
      }
      let res =await oRequest.addGoods(datas)

      if(res.status){
        uni.showToast({
          title:'添加成功'
                      })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
	.imgsInfo {
		width: 100%;
		height: auto;
		background-color: #FFFFFF;
		padding-bottom: 20rpx;
		.lable {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #333333;
			padding-left: 20rpx;
		}
		.coverBox {
			padding: 0 20rpx;
			.tip {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
		
				text {
					margin-left: 4rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #666666;
				}
			}
      .imagesBox{
        margin-top:16rpx;
      }
      .slot-btn {
        width: 168rpx;
        height: 168rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgb(244, 245, 246);
        border-radius: 10rpx;
      }

      .slot-btn__hover {
        background-color: rgb(235, 236, 238);
      }
			.addPic {
				margin-top: 16rpx;
				width: 168rpx;
				height: 168rpx;
				background: #F2F2F7;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 68rpx;
					height: 68rpx;
				}
			}
		}
		.envBox {
			margin-top: 32rpx;
		
			.tip {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
		
				text {
					margin-left: 4rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #666666;
				}
			}
		
			.imgs {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin-top: 16rpx;
		
				.img-li {
					position: relative;
					width: 168rpx;
					height: 168rpx;
					margin-right: 10rpx;
					margin-bottom: 10rpx;
		
					&:nth-child(4n) {
						margin-right: 0rpx;
					}
		
					.close {
						position: absolute;
						top: 6rpx;
						right: 6rpx;
						z-index: 99;
					}
		
					.icon {
						position: absolute;
						width: 168rpx;
						height: 168rpx;
					}
				}
		
				.addPic {
					width: 168rpx;
					height: 168rpx;
					background: #F2F2F7;
					border-radius: 8rpx;
					display: flex;
					align-items: center;
					justify-content: center;
		      //background:rgba(173, 173, 173,.2);
					image {
						width: 68rpx;
						height: 68rpx;
					}
				}
			}
		}
	}
	.goodsInfo {
		width: 100%;
		height: auto;
		background-color: #FFFFFF;
		padding: 0 20rpx;
		.lable {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #333333;
		}
		.shopInfo-li {
			width: 100%;
			height: 88rpx;
			display: flex;
			align-items: center;
			border-bottom: 2rpx solid #F2F2F7;
			input {
				height: 88rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		
			.text {
				width: 24%;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
			}
			&:last-child {
				border-bottom: none;
			}
		}
	}
	.submit {
		margin: 0 auto;
		width: 660rpx;
		height: 100rpx;
		background: linear-gradient(180deg, #218BFF 0%, #3064FC 100%);
		border-radius: 16rpx;
		font-size: 34rpx;
		font-family: Segoe UI;
		font-weight: 400;
		line-height: 100rpx;
		color: #FFFFFF;
		text-align: center;
	}
</style>
